<script setup>
	import { ref , computed} from 'vue'
	import {checkObjectValues,isLengthGreaterThanValueFun} from '@/utils/reduceFun.js'
	const props = defineProps({
		nameList:Array,
		numberList:Array,
		scaleList:Array
	})
	
	const data = ref({
		'0':'',
		'1':'',
		'2':''
	})
	const current = ref(null)
	const btnArr = ref(['♦','♣','♥','♠'])
	const btnColor = ref(['#eb6661','#5c5c5c','#b33028','#202020'])
	const selectArr = ref([
		[],[],[]
	])
	const emit = defineEmits(['colseModal','updateDate'])
	
	const formName = computed(() => {
		if(!props.nameList) return []
		const newNameList = props.nameList.slice(0, current.value).concat(props.nameList.slice( current.value + 1))
		return newNameList
	})
	
	const changeName = (index) => {
		current.value = index
	}
	
	const changeBtn = (nameIndex,btnIndex) => {
		const valueIndex = selectArr.value[nameIndex].indexOf(btnIndex)
		if(valueIndex !== -1){
			selectArr.value[nameIndex].splice(valueIndex,1)
		}else{
			selectArr.value[nameIndex].push(btnIndex)
		}
	}
	
	// 处理选择2的数量不能大于输入的数量
	const isHasGreaterValue = computed(() => {
		let newArr = []
		for(const item in data.value){
			newArr[item] = data.value[item]
		}
		const arrLength = selectArr.value.map(item => item.length)
		const hasGreaterValue  = arrLength.some((value,index) => {
			const key = index.toString()
			return value > data.value[key]
		})
		return hasGreaterValue 
	})
	
	const confirmAdd = async () => {
		const isEmpty = Object.values(data.value).every(value => value !== '')
		if(!isEmpty) return uni.$u.toast("请输入完整")
		const flattenedArr  = selectArr.value.flat()
		const hasDuplicates = flattenedArr.some((value, index) => flattenedArr.includes(value, index + 1));
		if(hasDuplicates) return uni.$u.toast("2 有重复")
		if(checkObjectValues(data.value)) return uni.$u.toast("输入大于13张")
		if(isHasGreaterValue.value) return uni.$u.toast("输入不规范，牌数量少于选择2的数量")
		let newArr = []
		for(const item in data.value){
			newArr[item] = data.value[item]
		}
		const result = newArr.map(index => props.numberList[index - 1])
		let totalArray = result.map((item,index) => {
			let doubleArr = selectArr.value[index].map(val => props.scaleList[val])
			const sum = doubleArr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
			if(Number(data.value[index]) === doubleArr.length){
				item = sum
			}else{
				item += sum
			}
			return item
		})
		totalArray.splice(current.value,0,0)
		emit('updateDate',totalArray)
	}
	
</script>

<template>
	<u-modal :show="true" title="对局加分" showCancelButton @cancel="emit('colseModal')" @confirm="confirmAdd">
		<view class="slot-content">
			<view class="header flex">
				<view style="width: 100rpx;color: red;">赢家:</view>
				<view class="name_list flex">
					<text class="name_item flex" :class="{'active':current === index}" 
						v-for="(item,index) in nameList" :key="item" @click="changeName(index)">{{item}}</text>
				</view>
			</view>
			<view class="form" v-if="current !== null">
				<u--form labelPosition="left" :model="data" labelWidth="100rpx">
					<u-form-item :label="item + ':'" borderBottom v-for="(item,index) in formName" :key="index">
						<view class="flex">
							<u--input v-model="data[index]" type="number" border="none" :maxlength="3" placeholder="请输入数量"></u--input>
							<view class="btn flex">
								<text class="btn_item flex" v-for="(btnItem,btnIndex) in 4" :key="btnIndex"
									:class="{'btn_active':selectArr[index].includes(btnIndex)}"
									:style="{color:btnColor[btnIndex]}"
									@click="changeBtn(index,btnIndex)">{{btnArr[btnIndex]}} 2</text>
							</view>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>
	</u-modal>
</template>


<style lang="scss" scoped>
	.form{
		width: 100%;
		.btn{
			width: 220rpx;
			flex-wrap: wrap;
			justify-content: flex-end;
			&_item{
				width: 45%;
				margin-left: 10rpx;
				border: 1px solid #eee;
			}
			&_item:nth-child(n + 3){
				margin-top: 10rpx;
			}
		}
	}
	.name_list{
		flex: 1;
		justify-content: space-between;
		.name_item{
			width: 100rpx;
			background: #eee;
			padding: 6rpx 0;
			font-size: 32rpx;
		}
		.active{
			background:rgba(92, 211, 194,0.6);
			color: white;
		}
	}
	.btn_active{
		background:rgba(92, 211, 194,0.6) !important;
	}
	
</style>